<!--
author: Zhong Yanlin
create: 2017-12-01
desc:底部导航栏组件
修改commonService.getFoot接口获取底部列表
如果底部导航为静态数据，需修改async内方法
update: 2018-01-10 by Mu Jinhong
-->
<template>
    <div class="index-bottom" id="index-bottom">
        <router-link v-for="(item, index) in listFoot" :key="item.type" :to="{ name: routeList[item.imgType]}" class="single-bottom index-page" ref="myBoxa" replace>
            <i v-if="routeList[item.imgType] == routePath"  class="iconfont changecolor footer-btn">
                <svg class="icon" :class="iconList[item.imgType]" aria-hidden="true">
                　　<use :xlink:href="actIconList[item.imgType]"></use>
            　　</svg>
            </i>
            <i v-else class="iconfont" v-bind:class="iconList[item.imgType]"></i>
            <p>{{item.name}}</p>
        </router-link>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService'

    export default {
        data() {
            return{
                footName: '',
                routeName: '',
                routeList:['','home','activities','discover','mycenter'], //通过数组来进行类型-路由映射
                iconList:['','icon-qizhi','icon-lianjie','icon-qizhi1','icon-wode1','icon-huodong4'], //通过数组来进行类型-路由映射
                actIconList:['','#icon-qizhitianchong','#icon-lianjiecopyx','#icon-qizhicopyx','#icon-wodetianchong','#icon-huodongtianchong'], //通过数组来进行类型-路由映射
                listFoot:[
                    {imgType:1,name:'阅读'},
                    {imgType:2,name:'活动'},
                    {imgType:3,name:'指数'},
                    {imgType:4,name:'我的'},
                ]
            }
        },
        computed: {
            //将存在store中的数据取出
            routePath() {
                if(this.$route.name == 'articles') return 'home'
                else return this.$route.name;
            },
        },
        mounted() {

        },
        updated() {

        },
        method: {

        }

    }
</script>

<style lang="less">
    .index-bottom {
        max-width: 450px;
        width: 100%;
        height: 1.334rem;
        background: #FFFFFF;
        box-shadow: 0 -1px 0 0 #DDDDDD;
        position: fixed;
        bottom:0;
        padding-bottom:constant(safe-area-inset-bottom);
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        z-index:20;
        .single-bottom {
            padding:.1rem 0;
            flex:1;
            -webkit-flex:1;
            -moz-flex:1;
            text-align: center;
            display: inline-block;
            text-decoration-line:none;
            top: 0.10133rem;
            .icon-wodetianchong,.icon-wode1{
                padding-left:5px
            }
            .iconfont{display:inline-block;font-size: .586rem;}
            .icon{display:inline-block;width: .64rem;height: .64rem;}
            .icon.icon-wode1{padding-left:6px;}
            .changecolor {color:#20A0FF}
            p {
                margin-top: .10667rem;
                /*font-size: .02666rem;*/
                color: #666666;
                width: 100%;
                height: .3117rem;
                line-height: .3117rem;
            }
        }


    }
    @media only screen and (min-device-width:320px) and (max-device-width:374px) {
        .index-bottom .single-bottom p{font-size: 9px;}
    }
    @media only screen and (min-device-width:375px) and (max-device-width:413px) {
        .index-bottom .single-bottom p{font-size: 10px;}
    }
    @media only screen and (min-device-width:414px) and (max-device-width:474px) {
        .index-bottom .single-bottom p{font-size: 11px;}
    }
    @media only screen and (min-device-width:475px){
        .index-bottom .single-bottom p{font-size: 13px;}
    }

</style>